{extend name="public/common"}

{block name="style"}
<title>考勤上报</title>
<link rel="stylesheet" href="/home/css/attendance/work.css?v={$Think.config.version}">
{/block}

{block name="body"}
<div id="app" v-cloak>
    <div class="time-select">
        <div class="time" @click="chooseTime">
            <img src="/home/images/attendance/time.png" />
            <p>{{time | timeToString('ymd')}} {{time | timeToWeekday}}</p>
            <i class="fa fa-angle-down"></i>
        </div>
        <mt-datetime-picker
                v-model="tempTime"
                type="date"
                ref="timePicker"
                year-format="{value} 年"
                month-format="{value} 月"
                date-format="{value} 日"
                :end-date="nowTime"
                @confirm="timeConfirm">
        </mt-datetime-picker>
    </div>
    <div class="type-title">{{level_1.name}}</div>

    <div class="body">
        <div class="box" v-if="level_1.user.length > 0">
            <ul>
                <li v-for="item,j in level_1.user">
                    <span class="name">{{item.username}}</span>
                    <div class="status-box">
                        <div v-for="is,key in status" :class="isSelected(key,item.status)" @click="choose(item,key)">
                            <span>{{is}}</span>
                            <img :src="'/home/images/attendance/check-'+key+'.png'" v-if="item.status == key"/>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="box" v-for="temp,k in level_2" v-if="temp.user.length > 0">
            <p>{{temp.name}}</p>
            <ul>
                <li v-for="item,j in temp.user">
                    <span class="name">{{item.username}}</span>
                    <div class="status-box">
                        <div v-for="is,key in status" :class="isSelected(key,item.status)" @click="choose(item,key)">
                            <span>{{is}}</span>
                            <img :src="'/home/images/attendance/check-'+key+'.png'" v-if="item.status == key"/>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
    <div class="foot" v-if="is_exist == 0 && judgeTime()">
        <p>* 当天上报默认是后一天的考勤 <br>
            例如：今天是{{nowTime.getTime()/1000 | timeToString('md')}}号，当前上报的是{{tomorrow.getTime()/1000 | timeToString('md')}}号的考勤记录。
        </p>
        <div class="send" @click="send">确认上报</div>
    </div>
</div>
{/block}

{block name="script"}
<script>
    console.log({$list});
    //时间戳转换
    Vue.filter('timeToWeekday', function (time) {
        if (time) {
            var week = ['周一','周二','周三','周四','周五','周六','周日'],
                weekday = new Date(time * 1000).getDay();
            return week[weekday-1];
        }
    });
    var vw = new Vue({
        el: "#app",
        data: {
            status:['休息','出勤','公出'],
            level_1: {$list}.level_1,
            level_2: {$list}.level_2,
            is_exist: {$is_exist},
            time: new Date().getTime() / 1000,
            nowTime: new Date(),
            tempTime: new Date(),
            tomorrow: new Date(new Date().getTime()+24*3600*1000)
        },
        methods: {
            choose(item,key) {
                console.log(this.judgeTime())
                if(this.judgeTime() && this.is_exist == 0){
                    item.status = key
                }else{
                    return false
                }
            },
            isSelected(key,status) {
                if(status == key){
                    return 'active'
                }
            },
            judgeTime() {
                var day_1 = this.nowTime.getDate(),
                    day_2 = this.tempTime.getDate(),
                    month_1 = this.nowTime.getMonth(),
                    month_2 = this.tempTime.getMonth(),
                    year_1 = this.nowTime.getFullYear(),
                    year_2 = this.tempTime.getFullYear();
                if(year_1 == year_2 && month_1 == month_2 && day_1 == day_2) {
                    return true
                }else{
                    return false
                }
            },
            chooseTime() {
                this.$refs.timePicker.open();
            },
            timeConfirm(val) {
                var _this = this;
                _this.tempTime = val;
                _this.time = new Date(_this.tempTime).getTime() / 1000;
                _this.$indicator.open({
                    text: '查询中，请稍后',
                    spinnerType: 'triple-bounce'
                });
                _this.$http.post('{:Url("Attendance/work")}',{
                    time:_this.time,
                    is_punch:0
                },{emulateJSON:true}).then(function (res) {
                    var data = res.body;
                    console.log(data)
                    _this.$indicator.close();
                    if(data.code == 1) {
                        _this.level_1 = data.data.level_1;
                        _this.level_2 = data.data.level_2;
                    }
                }, function (res) {
                    _this.$indicator.close();
                    _this.$toast({
                        message: "查找失败，请重试！",
                        duration: 1500
                    });
                });
            },
            send() {
                var _this = this,
                    data = [];
                for(var i in _this.level_2) {
                    for(var j in _this.level_2[i].user) {
                        data.push(_this.level_2[i].user[j])
                    }
                }
                for(var i in _this.level_1.user) {
                    data.push(_this.level_1.user[i])
                }
                console.log(data)
                _this.$indicator.open({
                    text: '正在发布中',
                    spinnerType: 'triple-bounce'
                });
                _this.$http.post('{:Url("Attendance/publish")}',{data:data},{emulateJSON:true}).then(function (res) {
                    var data = res.body;
                    console.log(data)
                    _this.$indicator.close();
                    if(data.code == 1){
                        _this.$toast({message:'发布成功',iconClass: 'icon', duration:1500});
                        _this.is_exist = 1;
                    }else{
                        _this.$toast({
                            message: data.msg,
                            duration: 1500
                        });
                    }
                }, function (res) {
                    _this.$indicator.close();
                    _this.$toast({
                        message: "提交失败，请重试！",
                        duration: 1500
                    });
                });
            },
        }
    })
</script>
{/block}
